import { PureComponent } from 'react';
import { exportFile } from 'table-xlsx';

import { TableC, PrimaryC, SecondHeaderC } from '@/src/components';

export default class GroupHeader extends PureComponent {
  getColumn = () => {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 100,
      },
      {
        title: 'Other',
        children: [
          {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
            width: 150,
          },
          {
            title: 'Address',
            children: [
              {
                title: 'Street',
                dataIndex: 'street',
                key: 'street',
                width: 150,
              },
              {
                title: 'Block',
                children: [
                  {
                    title: 'Building',
                    dataIndex: 'building',
                    key: 'building',
                    width: 100,
                  },
                  {
                    title: 'Door No.',
                    dataIndex: 'number',
                    key: 'number',
                    width: 100,
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        title: 'Company',
        children: [
          {
            title: 'Company Address',
            dataIndex: 'companyAddress',
            key: 'companyAddress',
            width: 200,
          },
          {
            title: 'Company Name',
            dataIndex: 'companyName',
            key: 'companyName',
          },
        ],
      },
      {
        title: 'Gender',
        dataIndex: 'gender',
        key: 'gender',
        width: 80,
      },
    ];
    return columns;
  };

  getData = () => {
    const dataSource = [];
    for (let i = 0; i < 3; i++) {
      dataSource.push({
        key: i,
        name: 'John Brown',
        age: i + 1,
        street: 'Lake Park',
        building: 'C',
        number: 2035,
        companyAddress: 'Lake Street 42',
        companyName: 'SoftLake Co',
        gender: 'M',
      });
    }
    return dataSource;
  };

  onExportFileClick = () => {
    exportFile({
      fileName: '表头分组导出.xlsx', // 文件名
      columns: this.getColumn(), // 表格columns
      dataSource: this.getData(), // 表格dataSource
    });
  };

  render() {
    return (
      <div>
        <SecondHeaderC title='表头分组导出' />
        <PrimaryC title='导出' onClick={() => this.onExportFileClick()} />
        <div>
          <TableC dataSource={this.getData()} columns={this.getColumn()} bordered size='small' hidePage />
        </div>
      </div>
    );
  }
}
